<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
<script type="text/javascript" src="../js/layui/layui.js"></script>
<style type="text/css">
		.layui-table-cell{
			height:100px;
			line-height: 100px;
		
		}
		.layui-table img{
			width:100px;
			height:100px;
		
		
		}
		
		.layui-table-cell {            overflow: visible !important;        } 

</style>
</head>
	
	
<body>
	<div id="recommend_div" style="display: none;" >
		<form id="form_updateRecommend" class="layui-form" lay-filter="recommend_huiXian"  style="hidden">
		<input id="RecommendId"   name="bannerId" type="hidden"  >
			<div class="layui-form-item">
				<label class="layui-form-label">推荐位</label>
				<div class="layui-inline">
					<input type="text" name="position" lay-verify="title"
						autocomplete="off" class="layui-input">
						
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-inline">
					<input type="text" name="weight"  autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-inline">
					<input type="text" name="name" class="layui-btn layui-btn-disabled"  autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品价格</label>
				<div class="layui-inline">
					<input type="text" name="discountPrice" class="layui-btn layui-btn-disabled"  autocomplete="off"
						class="layui-input">
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" id="anNiu" class="layui-btn" lay-submit=""
						lay-filter="upRecommend">修改</button>
					
				</div>
			</div>
		</form>
	</div>



	<div>
		<form class="layui-form" onsubmit="return false;">
			<div class="layui-form-item">
				
				<div class="layui-inline">
					<div class="layui-inline">
						<label class="layui-form-label">开始价格</label>
						<div class="layui-input-inline" style="width: 100px;">
							<input  type="text" name="beginPrice" id="beginPrice" placeholder="￥"
								autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid">结束价格</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="endPrice" id="endPrice" placeholder="￥"
								autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>



				<div class="layui-inline">
				<label class="layui-form-label">推荐类别</label>
				<div class="layui-input-block">
					<select id="position" name="position" lay-filter="aihao">
						<option value=""></option>
						<option value="推荐位A">推荐位A</option>
						<option value="推荐位B" >推荐位B</option>
						<option value="推荐位C">推荐位C</option>
						
					</select>
				</div>
			</div>
			
			<div class="layui-inline">
				<div class="layui-input-block">
					 <button type="submit"  class="layui-btn" lay-submit="" lay-filter="souSuo">搜索</button>
				</div>
			</div>
			</div>
		</form>
	</div>






	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="barDemo">
 		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	

	
			<script>
			var table,layer,form,$;
			layui.use(['table','form','layer'], function(){
			   table = layui.table;
				form=layui.form;
				$=layui.$;
				layer=layui.layer;
			  
			  //第一个实例
			  table.render({
			    elem: '#demo'
			    ,id:"recommend"
			    ,url: '../findRecommend' //数据接口
			    ,page: true //开启分页
			    , done: function (res, curr, count) {
			    	  //设置下拉框样式在表格之上 不会遮挡下拉框
			    	  $(".layui-table-body").css('overflow','visible');
			    	  $(".layui-table-box").css('overflow','visible');
			    	  $(".layui-table-view").css('overflow','visible');
			    	  
			          var tableElem = this.elem.next('.layui-table-view');
			          count || tableElem.find('.layui-table-header').css('overflow', 'auto');
			          layui.each(tableElem.find('select[name="logins"]'), function (index, item) {
			              var elem = $(item);
			              elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
			          });
			          form.render();//刷新表单
			      }
			    ,cols: [[ //表头
			      {field: 'bannerId', title: '推荐位编号'}
			      ,{field: 'position', title: '推荐位', templet: function (d) {
			           	return '<select name="logins" class="sel_xlk" lay-filter="xmFilter" lay-verify="required" data-state="' + d.position + '" data-value="' + d.bannerId + '" >' +
			      		'       <option value="0">请选择</option>' +
			          '         <option value="推荐位A">推荐位A</option>' +
			          '         <option value="推荐位B">推荐位B</option>' +
			          '         <option value="推荐位C">推荐位C</option>' +
			          '    </select>';
		}}
			      ,{field: 'weight', title: '权重', edit:'test',sort: true,
			    	  templet:function(d){
			  			return '<input type="text" id="weight" required lay-verify="required"   value="'+d.weight+'" autocomplete="off" class="layui-input">'
			  	  }} 
			      ,{field: 'name', title: '商品名称',templet:function(obj){return obj.books.name} }
			      ,{field: 'discountPrice', title: '商品价格' ,templet:function(obj){return obj.books.discountPrice}}
			      ,{field: 'img', title: '商品图片',templet:function(obj){return obj.books.img},templet : '<div "><img style="height:150px" src="../images/{{d.books.img}}" /></div>'}
			      ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
			    ]]
			  
			  
			  });
			  
			  
			form.on("submit(souSuo)",function(){
				//这里以搜索为例
				table.reload("recommend",{
				  where: { //设定异步数据接口的额外参数，任意设
					  beginPrice:$("#beginPrice").val(),
					  endPrice:$("#endPrice").val(),
					  position:$("#position").val()
				  }
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
				});
				return false;
			})
			form.on("submit(upRecommend)",function(){
				$.post("../updateRecommend",$("#form_updateRecommend").serialize(),function(res){
					layer.msg(res.msg)
					if(res.code=="0"){
						layer.closeAll();
						table.reload("recommend");
					} 
				},"json")
				return false;
			})
			  
			  
			  
			  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				  var data = obj.data; //获得当前行数据
				  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				 
				  if(layEvent === 'detail'){ //查看
					  $("#anNiu").hide();
					  form.val("recommend_huiXian",{
						 "name": data.books.name,
						 "discountPrice":data.books.discountPrice,
						 "img":data.books.img
					  })
					  form.val("recommend_huiXian",data);
					  layer.open({
						  type:1,
						  content:$("#recommend_div"),
						  area:['600px','600px']
					  });
					  
				  } else if(layEvent === 'del'){ //删除
				    layer.confirm('真的删除行么', function(index){
				    	 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
				    	 console.log(obj)
				      $.post("../deleteRecommend",{
				    	  bannerId:obj.data.bannerId
				      },function(res){
				    	  layer.msg(res)
				    	  if(res.code=="0"){
				    		  layer.msg("删除成功")
				    	  } else{
				    		  layer.msg("删除失败")
				    	  }
				      },"json")
				        });
				  } else if(layEvent === 'edit'){ //编辑
					  $("#anNiu").show();
					  form.val("recommend_huiXian",{
							 "name": data.books.name,
							 "discountPrice":data.books.discountPrice,
							 "img":data.books.img
						  })
					  form.val("recommend_huiXian",data);
					  layer.open({
						  type:1,
						  content:$("#recommend_div"),
						  area:['600px','600px']
					  });
				  
				  
				  } else if(layEvent === 'LAYTABLE_TIPS'){
				    layer.alert('Hi，头部工具栏扩展的右侧图标。');
				  }
				});
			
			table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
				var value = obj.value //得到修改后的值
			    ,data = obj.data //得到所在行所有键值
			    ,field = obj.field; //得到字段
			  	console.log(obj);
			  	 $.post("../updateRecommend",{
				  		bannerId : data.bannerId,
				  		weight:data.weight
					  	},function(res){
					  		layer.msg(res.msg);
					  	},"json")		
			});
			
			
			 form.on('select(xmFilter)', function (data) {//修改类型
		          var bannerId = data.elem.dataset.value; //当前数据的id
		          var position = data.elem.value; //当前字段变化的值
		          //修改状态
		      
		                   $.post("../updateRecommend",{
		                	   bannerId:bannerId,
		                	   	position:position
		                      	},function(res){//res是服务器返回的数据
		                      	    if (res.code == '0') {
		                      	    	layer.msg(res.msg);   	
		          					} else {
		          						layer.msg(res.msg);
		          					}
		                      	},"json");

			  
			 
			})
			  
});
			
			function editWeight(id){
			  	var weight=$("#weight").val()
			  	console.log(id)
			  	console.log(weight)
			  	
			  }
			
			
			 
</script>


</body>
</html>